// 函数式组件的改写
import { createVNode, render } from 'vue'
import _Message from './index.vue'
function Message ({ text, type }) {
  // 创建虚拟DOM, 组件
  const VNode = createVNode(_Message, {
    text,
    type
  })
  // 创建真实DOM, 挂载节点
  const container = document.createElement('div')
  document.body.appendChild(container)
  // 渲染,挂载- 将组件挂载到指定节点渲染
  render(VNode, container)
  // 渲染消失
  setTimeout(() => {
    render(null, container)
  }, 1500)
}

export default Message
// import { createVNode, render } from 'vue'
// import MessageComponent from './index.vue'

// function Message ({ type, text }) {
//   // 核心逻辑
//   // 1. 以Message组件为基础生成一个VNode
//   // 2. 准备一个挂载我们组件的节点元素出来(body -> id Container)
//   // 3. 使用render函数渲染到某个节点中
//   const MVNode = createVNode(MessageComponent, { text, type })
//   const container = document.createElement('div')
//   document.body.appendChild(container)
//   render(MVNode, container)

//   // 1500之后消失
//   setTimeout(() => {
//     render(null, container)
//   }, 1500)
// }

// export default Message
